<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件委托</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,
        body{
            height: 100%;
            overflow: hidden;
        }
        .center{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);

        }
        #root{
            width: 300px;
            height: 300px;
            background: green;
        }
        #outer{
            width: 200px;
            height: 200px;
            background: orange;
        }
        #inner{
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div id="root" class="center">
        <div id="outer" class="center">
            <div id="inner" class="center"></div>
        </div>

    </div>
    <!-- JS代码 -->
    <script>
        //window->document->html->body->root->outer->inner
        // const html=document.documentElement,
        //         body=document.body,
        //         root=document.querySelector('#root'),
        //         outer=document.querySelector('#outer'),
        //         inner=document.querySelector('#inner');

        //事件绑定,默认冒泡
        //阻止传播1  ev.stopPropagation() 同等级别的事件绑定继续执行
        //阻止传播2  ev.stopImmediatePropagation() 同等级别的事件绑定只执行到当前

        // root.addEventListener('click',function(ev){
        //     // ev.stopPropagation()
        //     ev.stopImmediatePropagation()
        //     console.log('root 捕捉1');
        // },true)
        // root.addEventListener('click',function(ev){

        //     console.log('root 捕捉2');
        // },true)
        // root.addEventListener('click',function(ev){
        //     console.log('root 捕捉3');
        // },true)
        // root.addEventListener('click',function(ev){
        //     console.log('root 冒泡');
        // },false)
        // outer.addEventListener('click',function(ev){
        //     console.log('outer 捕捉');
        // },true)
        // outer.addEventListener('click',function(ev){
        //     console.log('outer 冒泡');
        // },false)
        // inner.addEventListener('click',function(ev){
        //     console.log('inner 捕捉');
        // },true)
        // inner.addEventListener('click',function(ev){
        //     console.log('inner 冒泡');
        // },false)
    </script>
    <script>
        /* 事件委托,利用时间的传播机制,实现一套事件绑定处理方案.
            例如:一个容器中,有很多元素都要在点击的时候做一些事情.
                传统方案: 首先先获取需要操作的元素,然后逐一做事情的绑定
                事件委托: 只需要给容器做一个事件绑定, 根据时间的冒泡传播机制
                都会让容器的点击事件触发, 我们可以根据事件源做不同的事情.
        
        */
       const html=document.documentElement,
                body=document.body,
                root=document.querySelector('#root'),
                outer=document.querySelector('#outer'),
                inner=document.querySelector('#inner');
        //传统方案
        // root.addEventListener('click',function(){
        //     console.log('root');
            
        // })
        // outer.addEventListener('click',function(){
        //     console.log('outer');
            
        // })
        // inner.addEventListener('click',function(){
        //     console.log('inner');
            
        // })
        //事件委托
        body.addEventListener('click',function(ev){
            let target=ev.target,
                id=target.id
            if(id==='root'){
                console.log("root");
                return
                
            }
            if(id==='outer'){
                console.log("outer");
                return
            }
            if(id==='inner'){
                console.log("inner");
                return
            }
        
        })
    </script>
</body>
</html>